@charset "UTF-8";
.card{
	background-color:#00c267;
	@include flex();
	position:relative;
	z-index:1;
	.voucher{
		.inner{
			.message{
				color:#999;
				font-size:$fs11;
				text-align:center;
				padding:3rem 0 3rem;
			}
	        padding:0 1.4rem;
	        .icon-question-gray{
	        	@include mix-question-gray();
	        }
	        .icon-transfer{
	        	@include mix-transfer();
	        }
	        .link-friend{
	            text-align:right;
	        }

		}	
		background-color:#fff;
		margin: 2rem 1.4rem 0;
		@include border-radius(0.5rem);
		.hdtext{
		  font-size:$fs17;
		  color:#333;
		  padding:3.6rem 0 3rem;
		  text-align:center;
		}
		.frow{
			@include flexbox;
			&>div{
				@include flex-grow(1);
				    font-size: 1.1rem;
			}
			.link-intro{
				padding-bottom:1rem;
			}
		}
		.carriers{
			text-align:center;
			padding:3rem 0;
			.avatar{
				@include circle-radius(10rem);
				background-color:#d1d1d1;
				margin: 0 auto 1.5rem;
				
			}
			.operator{
				font-size:$fs15;
				color:#333333;
			}
		}
		.ticket{
			@include flexbox;			
			height:calc(100vw * 0.315625); 
			background-image:url(/images/code/receive-bg.png);
			background-repeat:no-repeat;
			background-position:center center;
			background-size:100%;
			margin:0.4rem auto 0;
			position:relative;
			.flag{
			    position:absolute;
			    left:0;bottom:0;
			    border-bottom-left-radius: 0.4rem;
			    overflow: hidden;
				.triangle{
					@include triangle-bottom-left(3.6rem,3.6rem,#bfbfbf);
				}
				.text{
				    position: absolute;
				    color: #fff;
				    z-index: 100;
				    left: -0.1rem;
				    bottom: 0.8rem;
				    font-size: 0.9rem;
				    white-space: nowrap;
				    transform: rotate(45deg);
				    text-align: center;
				}
			}
			.info,.price-box{
				@include align-self(center);
			}
			.info{
				@include flex-grow(1);
				padding-left:1rem;				
				.title{
					font-size:$fs15;
					color:#333333;
				}
				.condition{
					font-size:$fs11;
					color:#666;
					padding:0.2rem 0;
				}
				.valid-time{
					font-size:$fs10;
					color:#999;
				}
			}
			.price-box{
				.price{
					text-align:center;
					width:9rem;
					font-size:2.3rem;
					color:#fc7700;
					em{
						font-size:$fs16;
					}
				}
			}
			&.invalid{
				background-image:url(/images/code/receive-invalid-bg.png);
				.info{
					.title,.condition,.valid-time{
						color:#999;
					}
				}
				.price-box{
					.price{
						color:#999;
					}
				}
			}
		}
		.collect{
			text-align:center;            
			margin:0 auto 2rem;
			button{
				text-align:center;
				border:1.5px solid #00c267;
				    width: 100%;
				    @include border-radius();
				display:block;
				font-size:$fs15;
				color:#00c267;
				background-color:transparent;
				padding:0.9rem 0;
			}
		}
		.mycoupon{
			text-align:right;
			margin-bottom:7.8rem;
		}
	}
}